<template>
  <div class="app-container">
    <div class="address-layout">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="total-frame" v-loading="headLoading">
            <img :src="img_home_user" class="total-icon" />
            <div class="total-title">今日新增用户</div>
            <div class="total-value">{{ headCount.dayUserCount }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame" v-loading="headLoading">
            <img :src="img_home_video" class="total-icon" />
            <div class="total-title">今日新增视频</div>
            <div class="total-value">{{ headCount.dayVideoCount }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame" v-loading="headLoading">
            <img :src="img_home_admin" class="total-icon" />
            <div class="total-title">今日新增管理员</div>
            <div class="total-value">{{ headCount.dayAdminCount }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="total-frame" v-loading="headLoading">
            <img :src="img_home_user" class="total-icon" />
            <div class="total-title">总计注册用户</div>
            <div class="total-value">{{ headCount.totalUserCount }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame" v-loading="headLoading">
            <img :src="img_home_video" class="total-icon" />
            <div class="total-title">视频总数</div>
            <div class="total-value">{{ headCount.totalVideoCount }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame" v-loading="headLoading">
            <img :src="img_home_admin" class="total-icon" />
            <div class="total-title">管理员总数</div>
            <div class="total-value">{{ headCount.totalAdminCount }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-card class="mine-layout">
      <div style="text-align: center">
        <img
          width="150px"
          height="150px"
          src="https://atvris.oss-cn-beijing.aliyuncs.com/banner/we_chat_1641432888310.png"
        />
      </div>
      <div style="text-align: center">微信二维码</div>
      <div style="text-align: center; margin-top: 5px">联系作者</div>
    </el-card>
    <div class="un-handle-layout">
      <div class="layout-title">待处理事务</div>
      <div class="un-handle-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item" v-if="todoListCount.toVerifyUserCount">
              <span class="font-medium">待审核用户</span>
              <span style="float: right" class="color-danger"
                >({{ todoListCount.toVerifyUserCount }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item" v-if="todoListCount.toVerifyVideoCount">
              <span class="font-medium">待审核视频</span>
              <span style="float: right" class="color-danger"
                >({{ todoListCount.toVerifyVideoCount }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="un-handle-item"
              v-if="todoListCount.toVerifyCommentCount"
            >
              <span class="font-medium">待审核评论</span>
              <span style="float: right" class="color-danger"
                >({{ todoListCount.toVerifyCommentCount }})</span
              >
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item" v-if="todoListCount.toVerifyNewsCount">
              <span class="font-medium">待审核动态</span>
              <span style="float: right" class="color-danger"
                >({{ todoListCount.toVerifyNewsCount }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="un-handle-item"
              v-if="todoListCount.beOverdueBannerCount"
            >
              <span class="font-medium">轮播位即将到期</span>
              <span style="float: right" class="color-danger"
                >({{ todoListCount.beOverdueBannerCount }})</span
              >
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">视频资源总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="4" class="color-danger overview-item-value">{{
                  resources.offTheShelfCount
                }}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{
                  resources.toBeReviewedCount
                }}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{
                  resources.notPassedCount
                }}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{
                  resources.approvedCount
                }}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{
                  resources.totalVideoCount
                }}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="4" class="overview-item-title">已下架</el-col>
                <el-col :span="4" class="overview-item-title">待审核</el-col>
                <el-col :span="4" class="overview-item-title">未通过</el-col>
                <el-col :span="4" class="overview-item-title">通过</el-col>
                <el-col :span="4" class="overview-item-title">总计</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">实际用户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  resources.dayUserCount
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  resources.weekUserCount
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  resources.monthUserCount
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  resources.totalUserCount
                }}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">本周新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">用户总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">资源统计</div>
      <el-row>
        <el-col :span="4">
          <div style="padding: 20px">
            <div>
              <div style="color: #909399; font-size: 14px">
                本月新增用户总数
              </div>
              <div style="color: #606266; font-size: 24px; padding: 10px 0">
                {{statistics.monthUserCount}}
              </div>
              <div v-if="statistics.monthGrowthRateOfUser">
                <span class="color-success" style="font-size: 14px">{{statistics.monthGrowthRateOfUser}}</span>
                <span style="color: #c0c4cc; font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px">
              <div style="color: #909399; font-size: 14px">
                本周新增用户总数
              </div>
              <div style="color: #606266; font-size: 24px; padding: 10px 0">
                {{statistics.weekUserCount}}
              </div>
              <div v-if="statistics.weekGrowthRateOfUser">
                <span class="color-danger" style="font-size: 14px">{{statistics.weekGrowthRateOfUser}}</span>
                <span style="color: #c0c4cc; font-size: 14px">同比上周</span>
              </div>
            </div>
            <div style="margin-top: 20px">
              <div style="color: #909399; font-size: 14px">
                本月新增视频总数
              </div>
              <div style="color: #606266; font-size: 24px; padding: 10px 0">
                {{statistics.monthVideoCount}}
              </div>
              <div v-if="statistics.monthGrowthRateOfVideo">
                <span class="color-success" style="font-size: 14px">{{statistics.monthGrowthRateOfVideo}}</span>
                <span style="color: #c0c4cc; font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px">
              <div style="color: #909399; font-size: 14px">
                本周新增视频总数
              </div>
              <div style="color: #606266; font-size: 24px; padding: 10px 0">
                {{statistics.weekVideoCount}}
              </div>
              <div v-if="statistics.weekGrowthRateOfVideo">
                <span class="color-danger" style="font-size: 14px">{{statistics.weekGrowthRateOfVideo}}</span>
                <span style="color: #c0c4cc; font-size: 14px">同比上周</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div style="padding: 10px; border-left: 1px solid #dcdfe6">
            <el-date-picker
              style="float: right; z-index: 1"
              size="small"
              v-model="pickerDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleDateChange"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <div>
              <ve-line
                :data="chartData"
                :legend-visible="false"
                v-loading="loading"
                :data-empty="dataEmpty"
                :settings="chartSettings"
              ></ve-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { str2Date, formatDate } from "@/utils/date";
import img_home_user from "@/assets/images/home_user.png";
import img_home_admin from "@/assets/images/home_admin.png";
import img_home_video from "@/assets/images/home_video.png";
import {
  getResourceDayAndTotalCount,
  getTodoListCount,
  getResources,
  getDayResources,
  getStatistics,
} from "@/api/home";
const defaultHeadCount = {
  dayUserCount: null,
  totalUserCount: null,
  dayVideoCount: null,
  totalVideoCount: null,
  dayAdminCount: null,
  totalAdminCount: null,
};
const defaultTodoListCount = {
  toVerifyUserCount: null,
  toVerifyVideoCount: null,
  toVerifyCommentCount: null,
  toVerifyNewsCount: null,
  beOverdueBannerCount: null,
};

const defaultResources = {
  totalVideoCount: null,
  offTheShelfCount: null,
  approvedCount: null,
  toBeReviewedCount: null,
  notPassedCount: null,
  dayUserCount: null,
  weekUserCount: null,
  monthUserCount: null,
  totalUserCount: null,
};
const defaultStatistics = {
  monthUserCount: null,
  weekUserCount: null,
  monthGrowthRateOfUser: null,
  weekGrowthRateOfUser: null,
  monthVideoCount: null,
  weekVideoCount: null,
  monthGrowthRateOfVideo: null,
  weekGrowthRateOfVideo: null,
};
export default {
  name: "home",
  data() {
    return {
      headLoading: false,
      headCount: Object.assign({}, defaultHeadCount),
      todoListCount: Object.assign({}, defaultTodoListCount),
      resources: Object.assign({}, defaultResources),
      statistics: Object.assign({}, defaultStatistics),
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一月",
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pickerDate: "",
      chartSettings: {
        xAxisType: "time",
        area: true,
        axisSite: { right: ["videoCount"] },
        labelMap: { userCount: "用户数量", videoCount: "视频数量" },
      },
      chartData: {
        columns: [],
        rows: [],
      },
      loading: false,
      dataEmpty: false,
      img_home_user,
      img_home_admin,
      img_home_video,
    };
  },
  created() {
    this.getHeadCounts();
    this.getTodoCounts();
    this.queryResources();
    this.queryStatistics();
    this.initPickerDate();
    this.getData();
  },
  methods: {
    queryResources() {
      getResources().then((res) => {
        this.resources = res.data;
      });
    },
    getHeadCounts() {
      this.headLoading = true;
      getResourceDayAndTotalCount().then((res) => {
        this.headLoading = false;
        this.headCount = res.data;
      });
    },
    getTodoCounts() {
      getTodoListCount().then((res) => {
        this.todoListCount = res.data;
        // console.log(this.todoListCount);
      });
    },
    queryStatistics() {
      getStatistics().then((res) => {
        this.statistics = res.data;
      });
    },
    handleDateChange() {
      this.getData();
    },
    initPickerDate() {
      let start = new Date();
      start.setDate(1);
      const end = new Date();
      this.pickerDate = [start, end];
    },
    getData() {
      setTimeout(() => {
        this.loading = true;
        this.chartData = {
          columns: ["date", "userCount", "videoCount"],
          rows: [],
        };
        let query = {
          start: formatDate(this.pickerDate[0], "yyyy-MM-dd"),
          end: formatDate(this.pickerDate[1], "yyyy-MM-dd"),
        };
        getDayResources(query).then((res) => {
          let list = res.data;
          for (let i = 0; i < list.length; i++) {
            this.chartData.rows.push(list[i]);
          }
        });
        this.dataEmpty = false;
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

<style scoped>
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
}

.address-layout {
}

.total-layout {
  margin-top: 20px;
}

.total-frame {
  border: 1px solid #dcdfe6;
  padding: 20px;
  height: 100px;
}

.total-icon {
  color: #409eff;
  width: 60px;
  height: 60px;
}

.total-title {
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 70px;
  top: -50px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 70px;
  top: -40px;
}

.un-handle-layout {
  margin-top: 20px;
  border: 1px solid #dcdfe6;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #f2f6fc;
  font-weight: bold;
}

.un-handle-content {
  padding: 20px 40px;
}

.un-handle-item {
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
}

.overview-layout {
  margin-top: 20px;
}

.overview-item-value {
  font-size: 24px;
  text-align: center;
}

.overview-item-title {
  margin-top: 10px;
  text-align: center;
}

.out-border {
  border: 1px solid #dcdfe6;
}

.statistics-layout {
  margin-top: 20px;
  border: 1px solid #dcdfe6;
}
.mine-layout {
  position: absolute;
  right: 140px;
  top: 107px;
  width: 250px;
  height: 235px;
}
.address-content {
  padding: 20px;
  font-size: 18px;
}
</style>
